<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { Playlist } from "@/services/type"
import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps<{
  data: Playlist | undefined
}>()
const emits = defineEmits<{
  (e: 'open'): void
  (e: 'getComment', id: string | number): Promise<void>
}>()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
// 处理数字
const formateNum = (n: number | undefined) => {
  if (n === undefined) return
  if (n >= 100000000) {
    return (n / 100000000).toFixed(1) + "亿"
  } else if (n > 100000) {
    return (n / 10000).toFixed(1) + "万"
  } else {
    return n
  }
}
const onClick = (id: number | string | undefined) => {
  if (!id) return
  console.log(111)
  emits('open')
  emits('getComment', id)
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="header">
    <view
      class="bg"
      :style="{ backgroundImage: `url(${data?.coverImgUrl})` }"
    ></view>
    <image
      class="img"
      mode="aspectFill"
      :src="data?.coverImgUrl"
    ></image>
    <view class="title">{{ data?.name }}</view>
    <view class="ar">
      <view class="ar_item">
        <image
          :src="data?.creator.avatarUrl"
          mode="aspectFill"
        ></image>
        <view class="ar_name">{{ data?.creator.nickname }}</view>
      </view>
    </view>
    <view class="des">{{ data?.description }}</view>
    <view class="controls">
      <view>
        <uni-icons
          type="redo-filled"
          color="#ffffff"
        ></uni-icons
        >{{ formateNum(data?.shareCount) }}
      </view>
      <view @click="onClick(data?.id)">
        <uni-icons
          type="chat-filled"
          color="#ffffff"
        ></uni-icons
        >{{ formateNum(data?.commentCount) }}
      </view>
      <view>
        <uni-icons
          type="folder-add-filled"
          color="#ffffff"
        ></uni-icons
        >{{ formateNum(data?.subscribedCount) }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.header {
  height: 442rpx;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: hidden;
  display: grid;
  grid-template-columns: 240rpx auto;
  grid-template-rows: 84rpx 156rpx 72rpx auto;
  grid-column-gap: 30rpx;
  color: $uni-text-color-inverse;
  .bg {
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    filter: blur(40rpx) brightness(0.8);
    background-size: cover;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: scale(1.5);
    background: grey;
  }
  .img {
    width: 240rpx;
    height: 240rpx;
    border-radius: 24rpx;
    border: 2rpx solid #aaa;
    grid-row: 1 / span 2;
    background: #eee;
  }
  .title {
    font-size: $uni-font-size-lg;
    font-weight: 560;
    overflow: hidden;
    white-space: wrap;
  }
  .des,
  .controls {
    grid-column: 1 / span 2;
    font-size: $uni-font-size-sm;
  }
  .des {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 20rpx 0;
  }
  .ar {
    .ar_item {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      image {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        border: 2rpx solid #aaa;
      }
      .ar_name {
        font-size: $uni-font-size-sm;
      }
    }
  }
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba($color: #fff, $alpha: 0.4);
      width: 200rpx;
      height: 70rpx;
      border-radius: 35rpx;
    }
    .uni-icons {
      margin-right: 6rpx;
    }
  }
}
</style>
